<template>
  <div class="goods-detail">
    <!-- 顶部导航，锚点，页面滚动到某一距离才会出现 -->
    <div class="goods-detail-header" v-if="showGo">
      <div class="back-icon">
        <van-icon name="arrow-left" size="20" @click="back()" />
      </div>
      <div class="page-navigation">
        <ul>
          <li><a href="#goods">商品</a></li>
          <li><a href="#comment">评价</a></li>
          <li><a href="#detail">详情</a></li>
          <li><a href="#recommend">推荐</a></li>
        </ul>
      </div>
      <div class="header-ellipsis">
        <van-icon name="ellipsis" size="25" />
      </div>
    </div>
    <!-- 商品信息 -->
    <div class="goods-detail-body">
      <div class="goods-img" id="goods">
        <img src="../img/takeSeat.png">
      </div>
      <div class="goods-info">
        <div class="goods-price">
          <div class="goods-price-info">
            <span class="mark">￥</span>
            <span class="text">{{this.goodsDetail[0].selling_price}}</span>
          </div>
        </div>
        <h1 class="goods-intro">{{this.goodsDetail[0].goods_name}}{{this.goodsDetail[0].goods_intro}}</h1>
      </div>
      <div class="item-floor">
        <div class="window-sku">
          <van-sku v-model="show" :sku="sku" :goods="goods" :goods-id="goodsID" :quota="quota" :quota-used="quotaUsed"
            :hide-stock="sku.hide_stock" @buy-clicked="onBuyClicked" @add-cart="onAddCartClicked" ref="getSkuData" />
          <div class="btn-select" @click="changeShow()">
            <span class="sku-title">已选</span>
            <span class="select-goods-info">商品规格</span>
            <img src="../../views/Category/img/dot.png">
          </div>
        </div>
        <div class="send-for">
          <div class="btn-select" @click="changeShow()">
            <span class="sku-title">送至</span>
            <span class="select-goods-info">收货地址</span>
            <img src="../../views/Category/img/dot.png">
          </div>
        </div>
      </div>
      <div class="goods-comment item-floor" id="comment">
        <div class="gooods-comment-header">
          <span class="comment-title">评价</span>
          <span class="comment-count">500万+</span>
          <span class="praise-rate">好评度 99%</span>
          <van-icon name="arrow" />
        </div>
        <div class="goods-comment-section">
          <div class="comment-tag" v-for="(value, index) in commentList" :key="index">
            <van-tag round color="#fcedeb" text-color="#ad0000" type="danger">{{value.text}}({{value.count}})</van-tag>
          </div>
        </div>
        <div class="comment-item">
          <div class="comment-userInfo">
            <img src="../../views/Me/img/headSculpture.png">
            <div class="userName">用户名用户名</div>
            <div class="comment-stars">xxxx</div>
            <div class="comment-dateTime">2020-11-13</div>
          </div>
          <div class="comment-text">
            <span class="comment-info">{{commentText}}</span>
          </div>
          <div class="comment-img">
            <img src="../../views/Category/img/img.png">
            <img src="../../views/Category/img/img.png">
            <img src="../../views/Category/img/img.png">
            <img src="../../views/Category/img/img.png">
            <img src="../../views/Category/img/img.png">
          </div>
        </div>
      </div>
      <div class="goods-detail-info item-floor" id="detail">
        <van-tabs v-model="active">
          <van-tab title="商品介绍">商品介绍</van-tab>
          <van-tab title="规格参数">商品规格</van-tab>
          <van-tab title="售后服务">售后服务 </van-tab>
        </van-tabs>
        <!--        <div class="goods-detail-info-header"></div>
        <div class="goods-detail-info-text"></div> -->
      </div>
      <div class="page-footer"></div>
    </div>
    <div class="goods-detail-footer">
      <van-goods-action>
        <!-- <van-goods-action-icon icon="chat-o" text="客服" dot /> -->
        <van-goods-action-icon icon="cart-o" text="购物车" :badge="this.cartCount" @click="onClickToCart()" />
        <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
        <van-goods-action-button type="warning" text="加入购物车" @click="changeShow()" />
        <van-goods-action-button type="danger" text="立即购买" @click="changeShow()" />
      </van-goods-action>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        goodsID: '',
        goodsDetail: {},
        // 已经购买过的数量
        quotaUsed: 0,
        // 限购数，0 表示不限购
        quota: 0,
        showGo: false,
        show: false,
        active: 1,
        commentList: [{
          text: '细腻光滑',
          count: 110
        }, {
          text: '高端大气',
          count: 17
        }, {
          text: '温和无刺激',
          count: 11
        }, {
          text: '分量足够',
          count: 7
        }, {
          text: '泡泡控',
          count: 6
        }, {
          text: '洗面奶柔和',
          count: 3
        }],
        commentText: '太爱在京东上买东西了，每次都会买很多日常用品跟护肤品，这个洗面奶是因为之前用过小瓶的，用后觉得还不错，容易起泡，很温和，适合我干性皮肤，有活动就买了大瓶的用。但是我哥油性肌肤就不适合用了，给他买的是绿色溪谷的羊奶皂洗脸，他比较习惯香皂洗脸，他说很好用，使用感不错，清洁很到位，主要是不会太干，紧巴巴的，不然平时看他脸太油了啧啧，香皂用了之后就会好很多，沐浴露也很好用，味道很香，据说有亮肤效果，夏天来了，都要用起来呀～',
        sku: {
          // 所有sku规格类目与其值的从属关系，比如商品有颜色和尺码两大类规格，颜色下面又有红色和蓝色两个规格值。
          // 可以理解为一个商品可以有多个规格类目，一个规格类目下可以有多个规格值。
          tree: [{
            k: '颜色', // skuKeyName：规格类目名称
            k_s: 's1', // skuKeyStr：sku 组合列表（下方 list）中当前类目对应的 key 值，value 值会是从属于当前类目的一个规格值 id
            v: [{
                id: '1', // skuValueId：规格值 id
                name: '红色', // skuValueName：规格值名称
                imgUrl: 'https://img01.yzcdn.cn/1.jpg', // 规格类目图片，只有第一个规格类目可以定义图片
                previewImgUrl: 'https://img01.yzcdn.cn/1p.jpg' // 用于预览显示的规格类目图片
              },
              {
                id: '1',
                name: '蓝色',
                imgUrl: 'https://img01.yzcdn.cn/2.jpg',
                previewImgUrl: 'https://img01.yzcdn.cn/2p.jpg'
              }
            ],
            largeImageMode: true //  是否展示大图模式
          }],
          // 所有 sku 的组合列表，比如红色、M 码为一个 sku 组合，红色、S 码为另一个组合
          list: [{
            id: 2259, // skuId
            s1: '1', // 规格类目 k_s 为 s1 的对应规格值 id
            s2: '1', // 规格类目 k_s 为 s2 的对应规格值 id
            price: 100, // 价格（单位分）
            stock_num: 110 // 当前 sku 组合对应的库存
          }],
          price: 2, // 默认价格（单位元）
          stock_num: 227, // 商品总库存
          collection_id: 2261, // 无规格商品 skuId 取 collection_id，否则取所选 sku 组合对应的 id
          none_sku: false, // 是否无规格商品
          hide_stock: false // 是否隐藏剩余库存
        },
        goods: {
          // 默认商品 sku 缩略图
          picture: 'https://img01.yzcdn.cn/1.jpg'
        }
      }
    },
    methods: {
      ...mapMutations(['SET_CART', 'SET_GOODS_ITEM']),
      back() {
        this.$router.go(-1)
      },
      // 点击购买
      onBuyClicked() {
        const list = []
        const list1 = {
          count: this.$refs.getSkuData.getSkuData().selectedNum,
          goodsID: this.goodsID
        }
        list.push(list1)
        this.SET_GOODS_ITEM(list)
        this.$router.push({
          path: '/OrderConfirm'
        })
      },
      // 点击加入购物车
      onAddCartClicked() {
        this.skuData = this.$refs.getSkuData.getSkuData()
        console.log('skuData:', this.skuData)
        const data = {
          user_id: this.loginToken.userId,
          goods_id: this.skuData.goodsId,
          goods_count: this.skuData.selectedNum,
          unit_price: this.goodsDetail[0].selling_price
        }
        if (this.loginToken.token) {
          console.log(1)
          this.$api.homeData.addCart(data).then(res => {
            console.log(res)
            if (res.code === 201) {
              this.$toast.success('添加成功！')
              this.show = false
            } else {
              this.$toast.fail('添加失败')
            }
          })
        } else {
          console.log('未登录')
        }
      },
      changeShow() {
        this.show = true
      },
      // 点击购物车图标
      onClickToCart() {
        this.$router.push({
          name: 'Cart'
        })
      }
    },
    created() {
      this.goodsID = Number(this.$route.params.goodsID)
      this.goodsDetail = this.goodsInfo.filter(value => {
        return value.goods_id === this.goodsID
      })
    },
    mounted() {
      var vm = this
      vm.sku.price = vm.goodsDetail[0].selling_price
      window.onscroll = function() {
        if (document.documentElement.scrollTop > 120) {
          vm.showGo = true
        } else {
          vm.showGo = false
        }
      }
    },
    computed: {
      ...mapState(['goodsInfo', 'loginToken', 'shopCart', 'cartCount'])
    }
  }
</script>

<style scoped>
  .goods-detail {
    padding-bottom: 400px;
    background-color: #F2F2F2;
  }

  .goods-detail-header {
    height: 46px;
    padding: 0 15px;
    box-sizing: border-box;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: white;
    width: 100%;
    border-color: #e5e5e5;
    font-size: 14px;
    z-index: 999;
  }

  .page-navigation ul {
    height: 46px;
    display: flex;
    width: 250px;
    align-items: center;
    justify-content: space-between;
    flex: 1;
  }

  .page-navigation ul li {
    flex: 1;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  .page-navigation ul a {
    color: #262626;
    font-size: 13px;
    font-weight: 700px;
  }

  .page-navigation ul li:before {
    content: '';
    position: absolute;
    width: 50%;
    bottom: 8px;
    height: 1px;
    background-color: red;
    opacity: 0;
  }

  .page-navigation ul li:hover:before {
    bottom: 8PX;
    opacity: 1;
    transition: bottom 0.3s, opacity 0.3s 0.1s;
  }

  .goods-img {
    background-color: white;
    text-align: center;
  }

  .goods-img img {
    width: 414px;
    height: 414px;
  }

  .goods-info {
    position: relative;
    padding: 0 18px;
    background-color: white;
    color: red;
    font-size: 16px;
    border-radius: 0 0 12px 12px;
  }

  .goods-price-info {
    display: flex;
    align-items: center;
  }

  .text {
    font-size: 30px;
  }

  .goods-intro {
    color: #2b2b2b;
    font-size: 18px;
    font-weight: 700;
    line-height: 21px;
    padding-top: 12px;
    padding-bottom: 16px;
    white-space: pre-line;
  }

  .item-floor {
    margin-top: 12px;
    padding: 0 18px;
    border-radius: 12px;
    background-color: white;
  }

  .btn-select,
  .gooods-comment-header {
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-content: center;
    margin: 5px 0 5px 0;
    padding: 18px 0;
  }

  .btn-select .sku-title,
  .gooods-comment-header .comment-title {
    position: relative;
    font-size: 13px;
    color: #262626;
    font-weight: 700;
  }

  .btn-select .select-goods-info {
    position: absolute;
    left: 70px;
    font-size: 13px;
    font-weight: 200;
  }

  .btn-select img {
    width: 20px;
    height: 20px;
  }

  .gooods-comment-header .comment-title {
    font-size: 15px;
  }

  .gooods-comment-header .comment-count {
    position: absolute;
    left: 55px;
    padding-top: 4px;
    font-size: 12px;
    color: #262626;
    font-weight: 600;
  }

  .gooods-comment-header .praise-rate {
    position: absolute;
    right: 35px;
    color: #8c8c8c;
    font-size: 14px;
    font-weight: 500;
  }

  .van-icon {
    font-size: 14px;
    font-weight: 700;
    padding-top: 3px;
  }

  .goods-comment-section {
    display: flex;
    flex-wrap: wrap;
    height: 83px;
    overflow: hidden;
    padding-bottom: 15px;
  }

  .comment-tag {
    margin: 0 12px 12px 0;
    font-size: 12px;
  }

  .comment-tag .van-tag {
    padding: 10px;
    margin: 0 8px 8px 0;
  }

  .comment-item {
    padding-top: 8px;
    padding-bottom: 12px;
  }

  .comment-userInfo {
    display: flex;
    position: relative;
    justify-content: space-between;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .comment-userInfo img {
    width: 20px;
    height: 20px;
  }

  .comment-userInfo .userName {
    position: absolute;
    left: 30px;
    font-size: 12px;
    color: #262626;
  }

  .comment-userInfo .comment-stars {
    position: absolute;
    left: 110px;
  }

  .comment-userInfo .comment-dateTime {
    color: #999999;
    font-size: 12px;
  }

  .comment-text {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    font-size: 13px;
    color: #262626;
    margin: 18px 0;
    text-overflow: ellipsis;
  }

  .comment-img {
    overflow: hidden;
    overflow-x: auto;
    white-space: nowrap;
  }

  .comment-img img {
    margin-right: 6px;
    width: 80px;
    height: 80px;
    border-radius: 6px;
  }

  .van-tabs {
    padding-top: 12px;
  }

  .goods-detail-footer {
    position: fixed;
  }
</style>
